<template>
	<el-container>
		<el-aside :width="isCollapse ? '64px' : '200px'">
			<h3 class="system-title">
				<transition name="delay-fade">
					<div v-show="!isCollapse" style="position: absolute;">通用后台管理系统</div>
				</transition>
				<transition name="fade">
					<i v-show="isCollapse" class="el-icon-platform-eleme"></i>
				</transition>
			</h3>
			<aside-menu :menus="menus"></aside-menu>
		</el-aside>
		<el-container>
			<el-header>
				<common-header></common-header>
			</el-header>
			<common-tags></common-tags>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
import { mapState } from 'vuex';
import AsideMenu from '../components/AsideMenu.vue';
import CommonHeader from '../components/CommonHeader.vue';
import CommonTags from '../components/CommonTags.vue';
export default {
	name: 'MainPage',
	components: {
		AsideMenu,
		CommonHeader,
		CommonTags
	},
	computed: {
		...mapState('pannel', ['menus', 'isCollapse'])
	}
}
</script>
<style lang="less" scoped>
	@bcolor: #333;
	@white: #fff;
	@center: center;
	.height100 {
		height: 100%;
	}
	.el-container {
		.height100();
		.el-header {
			background-color: @bcolor;
			.height100();
		}
		.el-aside {
			overflow: hidden;
			transition: width .3s;
			.height100();
			.system-title {
				position: relative;
				font-size: 16px;
				line-height: 60px;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: @white;
				background-color: #545c64;
			}
		}
		.el-main {
			padding-top: 10px;
		}
	}
	.delay-fade-enter-active {
		transition-delay: 0.3s;
	}
	.fade-enter-active, 
	.fade-leave-active {
		transition: opacity .3s;
	}
	.delay-fade-enter,
	.delay-fade-to,
	.fade-enter, 
	.fade-leave-to {
		opacity: 0;
	}
</style>